<template>
  <div class="home">
    <!-- 导航条 -->
    <!-- <van-nav-bar title="智慧商城" fixed /> -->

    <!-- 搜索框 -->
    <van-search shape="round" background="#f1f1f2" placeholder="请在此输入搜索关键词" @click-input="router.push('/pages/search/index')" />

    <!-- 轮播图 -->
    <swiper class="my-swipe" autoplay interval=3000 duration=500 indicator-dots="true" indicator-color="#FFFFFF" lazy-render>
      <swiper-item v-for="item in bannerList" :key="item.imgUrl">
        <img :src="item.imgUrl" alt="">
      </swiper-item>
    </swiper>

    <!-- 导航 -->
    <van-grid :columnNum=5 :iconSize="'40px'">
      <van-grid-item v-for="item in navList" :key="item.imgUrl" :icon="item.imgUrl" :text="item.text"
        @click="router.push('/pages/tabs/category/index')" />
    </van-grid>

    <!-- 主会场 -->
    <div class="main">
      <img src="@/static/images/main.png" alt="">
    </div>
    <!-- 猜你喜欢 -->
    <div class="guess">
      <p class="guess-title">—— 猜你喜欢 ——</p>

      <div class="goods-list">
        <GoodsItem v-for="item in proList" :item="item" :key="item.goods_id"></GoodsItem>
      </div>
    </div>
  </div>
</template>

<script>
  import GoodsItem from '@/components/GoodsItem.vue'
  import { getHomeData } from '@/api/home'
  import router from '@/utils/router'
  export default {
    name: 'HomePage',
    components: {
      GoodsItem,
    },
    data() {
      return {
        router,
        bannerList: [], // 轮播
        navList: [], // 导航
        proList: []// 商品
      }
    },
    computed:{
      carouselList() {
        return this.bannerList.map(item => {
          return {
            src: item.imgUrl,
          }
        })
      }
    },
    async created() {
      const { data: { pageData } } = await getHomeData()

      this.bannerList = pageData.items[1].data
      this.navList = pageData.items[3].data
      this.proList = pageData.items[6].data
    }
  }
</script>

<style lang="less" scoped>

  // 主题 padding
  .home {
    padding-top: 54px;
    padding-bottom: 50px;
  }

  // 搜索框样式定制
  .press-search-index {
    position: fixed;
    width: 100%;
    top: var(--status-bar-height);
    z-index: 999;
  }

  // 轮播图
  .my-swipe {
  width: 100%;
  height: calc(100vw / 2.02);
}
  .my-swipe img {
    width: 100%;
  }

  // 主会场
  .main img {
    display: block;
    width: 100%;
  }

  // 猜你喜欢
  .guess .guess-title {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  // 商品样式
  .goods-list {
    background-color: #f6f6f6;
  }
</style>
